<template>
	<view class="money-swiper">
	<swiper   :interval="3000" :duration="1000" class="swiper1" circular="true" next-margin="70px" previous-margin="70px" @change="swiperChange">
				<swiper-item>
	<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode="" class="simg1" :class="index==0 ? 'active':'aStop'" ></image> 
					<text class="t1">{{BTC.total_assets || 0.00}}</text>
					<text class="t2">{{BTC.frozen || 0.00}}</text>
					<text class="t3">{{BTC.stay_withdrawn || 0.00}}</text>
					<text class="t4">{{BTC.can_withdrawn || 0.00}}</text>
					<button type="default" class="btn1" @click="chargeMoney">{{$t('money.swiper.etc')}}</button>
					<button type="default" class="btn2" @click="withdrawMoney">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode=""  class="simg1" :class="index==1 ? 'active':'aStop'"></image>
				<text class="t1">{{BHC.total_assets || 0.00}}</text>
				<text class="t2">{{BHC.frozen || 0.00}}</text>
				<text class="t3">{{BHC.stay_withdrawn || 0.00}}</text>
				<text class="t4">{{BHC.can_withdrawn || 0.00}}</text>
				<button type="default" class="btn1">{{$t('money.swiper.etc')}}</button>
				<button type="default" class="btn2">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode="" class="simg1" :class="index==2 ? 'active':'aStop'" ></image>
				<text class="t1">{{LTC.total_assets || 0.00}}</text>
				<text class="t2">{{LTC.frozen || 0.00}}</text>
				<text class="t3">{{LTC.stay_withdrawn || 0.00}}</text>
				<text class="t4">{{LTC.can_withdrawn || 0.00}}</text>
				<button type="default" class="btn1">{{$t('money.swiper.etc')}}</button>
				<button type="default" class="btn2">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode="" class="simg1" :class="index==3 ? 'active':'aStop'" ></image>
				<text class="t1">{{ETH.total_assets || 0.00}}</text>
				<text class="t2">{{ETH.frozen || 0.00}}</text>
				<text class="t3">{{ETH.stay_withdrawn || 0.00}}</text>
				<text class="t4">{{ETH.can_withdrawn || 0.00}}</text>
				
				<button type="default" class="btn1">{{$t('money.swiper.etc')}}</button>
				<button type="default" class="btn2">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
			</swiper>
			
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		data() {
			return {
				index:0,
				BTC:'',
				BHC:'',
				LTC:'',
				ETH:''
			};
		},
		methods:{
			swiperChange(e){
				this.index=e.detail.current;
				console.log(e.detail.current);
			},
			chargeMoney(){
				//充币
				uni.navigateTo({
					url:'../../pages/Withdraw-money/Withdraw-money'
				})
			},
			withdrawMoney(){
				//提币
				uni.navigateTo({
					url:'../../pages/Charge-money/Charge-money'
				})
				
			}
		},
		created() {
			this.$api.sendRequest({
				url: api.MONEY_wallet,
				data:{
					user_id:7,
					page:1
				},
				success: res => {
					console.log(res.data);
					
					// this.BTC=res.data[0]
					// this.BHC=res.data[1]
					// this.LTC=res.data[2]
					// this.ETH=res.data[3]
				}
			});
			
		}
	}
</script>

<style scoped>
	 .swiper1{
		 width: 96%;
		height: 220rpx;
		margin: 20rpx;
		margin-bottom: 50rpx;
	}
	.swiper1>.swiper-item{
		width: 100%;
		height: 140rpx;
		position: relative;
	}
	.swiper-item>text{
		font-size: .7em;
		font-weight: 550;
	}
	.swiper-item>text:nth-of-type(1){
		position: absolute;
		top: 26rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(2){
		position: absolute;
		top: 76rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(3){
		position: absolute;
		top: 126rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(4){
		position: absolute;
		top: 172rpx;
		left: 220rpx;
	}
	.btn1{
		height: 40rpx;
		font-size: .5em;
		line-height: 40rpx;
		background-color: #F05B34;
		position: absolute;
		right: 30rpx;
		top: 60rpx;
	}
	.btn2{
		height: 40rpx;
		font-size: .6em;
		line-height: 40rpx;
		background-color: #FFFFFF;
		position: absolute;
		right: 30rpx;
		top: 120rpx;
	}
	.simg1{
		width: 80%;
		height: 200rpx;
		position: absolute;
		left: 50rpx;
		z-index: -1;
	} 
	.aStop{
		position: relative;
		top: 20rpx;
		width: 84%;
	}
	 .active{
		width: 100%;
		height: 240rpx;
		position: absolute;
		left: 0;
	}
</style>
